<template>
    <div class="ui-layout">
    	<div class="ui-layout-header">
    		头部面板
    	</div>
    	<div class="ui-layout-sidebar">
    		侧面板
    		<div v-for="menu in menuList" :key="menu.name">
    			<router-link :to="menu.path">{{ menu.meta.title }}</router-link>
    		</div>
    	</div>
    	<div class="ui-layout-body">
    		<div class="ui-layout-content">
	    		<keep-alive :include="cachePage">
	                <router-view></router-view>
	            </keep-alive>
            </div>
    	</div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            
        }
    },
    computed: {
        menuList () {
            return this.$store.state.app.menuList;
        },
        cachePage () {
            return this.$store.state.app.cachePage;
        }
    },
   	watch: {
        '$route' (to) {
        	this.handleGetCurrentMenu(to);
        }
    },
    mounted() {
    	this.handleGetCurrentMenu(this.$route);
    },
    methods: {
    	handleGetCurrentMenu(to) {
            console.log(to.name)
            this.currentMenuName = to.name;
    	}
    }
};
</script>
